<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>节点关系</title>
        <style type="text/css">
            /* class选择器 */
            .wrapper { border: 1px solid #dedede ; }
            /* 亲子选择器 */
            .wrapper>.inner { margin: 10px ; border: 1px solid blue ; }
            /* 后代选择器 */
            .wrapper span { display: inline-block ; height: 50px ; line-height: 50px; width: 50px; }
        </style>
    </head>
    <body>

        <div class="wrapper">
            <div class="inner first">
                <span>11</span>
                <span>12</span>
                <span>13</span>
            </div>
            <div class="inner second">
                <span>21</span>
                <!-- 注意空白和文本也会当作节点来处理 -->
                <span>22</span>
                <span>23</span>
            </div>
            <div class="inner third">
                <span>31</span>
                <span>32</span>
                <span>33</span>
            </div>
        </div>

        <script type="text/javascript">
            // 通过 Document.prototype 提供的函数来获取指定的元素(Element)
            let e = document.querySelector( '.second' );
            console.log( e );

            // 根据元素关系获得 e 元素的父节点
            let p = e.parentNode ;
            console.log( p );

            // 根据元素关系获得 e 元素的子节点列表(NodeList)
            let childs = e.childNodes ;
            // NodeList实例是一个类似于数组的对象(实例)
            console.log( childs );
            // 将类数组对象(实例)转化为数组对象(实例)
            let arr = Array.from( childs );
            arr.forEach( x => { 
                if( x.nodeType === Node.ELEMENT_NODE ) {
                    console.log( '元素:' , x ); 
                }

                if( x.nodeType === Node.TEXT_NODE ){
                    console.log( '文本:' , x ); 
                }

                if( x.nodeType === Node.COMMENT_NODE ){
                    console.log( '注释:' , x ); 
                }
            });

            // 根据元素关系获得 e 元素的前一个节点
            let previous = e.previousSibling ;
            console.log( previous );

            // 从文本节点再向前取即可能取得前一个元素
            let prevElement = previous.previousSibling ;
            console.log( prevElement );

            // 根据元素关系获得 e 元素的后一个节点
            let next = e.nextSibling ;
            console.log( next );

            // 从文本节点再向后取即可能取得后一个元素
            let nextElement = next.nextSibling ;
            console.log( nextElement );
        </script>
        
    </body>
</html>